<template>
  <div class="app-min">
    <div class="box contenBox locationAdd">
      <el-form :v-model="from"  :rules="rules">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="库区" prop="location">
              <el-cascader
                v-model="from.location"
                :options="permList"
                  @expand-change="changeFn"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库位编号" prop="code">
              <el-input v-model="from.code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库位名称" >
              <el-input v-model="from.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度类型" prop="temperatureType">
              <el-select v-model="from.temperatureType" placeholder="请选择">
                <el-option
                  v-for="item in temperatureType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="承重类型"  prop="bearingType">
              <el-select v-model="from.bearingType" placeholder="请选择">
                <el-option
                  v-for="item in bearingType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用途属性" prop="useType">
              <el-select v-model="from.useType" placeholder="请选择">
                <el-option
                  v-for="item in useType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库区状态" prop="status">
              <el-radio-group v-model="from.status">
                 <el-radio :label="0">停用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="承载体积" >
              <el-input placeholder="请输入" v-model="from.maxVolume">
                <div slot="suffix" class="bgc">m³</div></el-input
              >
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="承载上线">
              <el-input placeholder="请输入" v-model="from.maxNum">
                <div slot="suffix" class="bgc">个</div></el-input
              >
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="承载重量">
              <el-input placeholder="请输入" v-model="from.maxWeight">
                <div slot="suffix" class="bgc">kg</div></el-input
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item>
              <div>库位排/列/层</div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input
                    placeholder="请输入"
                    v-model="from.locationRow"
                  ></el-input>
                </el-col>
                <el-col :span="8">
                  <el-input
                    placeholder="请输入"
                    v-model="from.locationColumn"
                  ></el-input>
                </el-col>
                <el-col :span="8">
                  <el-input
                    placeholder="请输入"
                    v-model="from.locationLayer"
                  ></el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <div>库位长/宽/高</div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-input placeholder="请输入" v-model="from.locationLength">
                    <div slot="suffix" class="bgc">111</div>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-input placeholder="请输入" v-model="from.locationWidth">
                    <div slot="suffix" class="bgc">111</div>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-input placeholder="请输入" v-model="from.locationHigh">
                    <div slot="suffix" class="bgc">cm</div>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
         <div class="button">
          <button class="fanhui" @click="$router.back()">返回</button>
          <button class="submit" @click="submit">提交</button>
        </div>
      </el-form>
    </div>
    <p>{{$route.params.id}}</p>
  </div>
</template>

<script>
import { getone, getCode, List, add, getEdit, editSubmit } from '@/api/location'
export default {
  data () {
    return {
      from: {
        areaId: '',
        warehouseId: '',
        bearingType: '',
        code: '',
        name: '',
        status: 1,
        temperatureType: '',
        useType: '',
        location: [],
        maxVolume: '',
        maxNum: '',
        maxWeight: '',
        locationRow: '',
        locationColumn: '',
        locationLayer: '',
        locationLength: '',
        locationWidth: '',
        locationHeight: ''
      },
      permList: [], // 父的数据
      temperatureType: [
        {
          value: 'CW',
          label: '常温'
        },
        {
          value: 'LC',
          label: '冷藏'
        },
        {
          value: 'HW',
          label: '恒温'
        }
      ],
      bearingType: [
        {
          value: 'ZX',
          label: '重型'
        },
        {
          value: 'QX',
          label: '轻型'
        },
        {
          value: 'OX',
          label: '中型'
        }
      ],
      useType: [
        {
          value: 'RKHCQ',
          label: ' 入库缓存区'
        },
        {
          value: 'CKHCQ ',
          label: '出库缓存区'
        },
        {
          value: 'CCQ ',
          label: '存储区'
        },
        {
          value: 'FJQ  ',
          label: '分拣区'
        },
        {
          value: 'ZJQ ',
          label: '质检区'
        }
      ],
      rules: {
        bearingType: [{ required: true, message: '请输入', trigger: 'blur' }],
        code: [{ required: true, message: '请输入', trigger: ['blur'] }],
        temperatureType: [
          { required: true, message: '请输入', trigger: ['blur'] }
        ],
        name: [{ required: true, message: '请输入' }],
        location: [{ required: true, message: '请输入', trigger: ['blur'] }],
        maxVolume: [{ required: true, message: '请输入', trigger: ['blur'] }],
        status: [{ required: true, message: '请输入', trigger: ['blur'] }],
        useType: [{ required: true, message: '请输入', trigger: ['blur'] }]
      }
    }
  },
  async created () {
    if (this.$route.params.id !== 'null') {
      const { data } = await getEdit(this.$route.params.id)
      this.location = [data.warehouseId, data.areaId]
      this.from = data
      // console.log(data)
    }
    const res = await getCode()
    this.from.code = res.data
    const { data } = await getone()
    console.log(data)
    // 遍历一级，返回出来想要的值然后给每一项新增一个孩子
    this.permList = data.map(item => {
      return { value: item.id, label: item.name, children: [] }
    })
    // console.log(this.permList)
  },
  methods: {
    async changeFn (val) {
      console.log(val) // 打印查来的是value
      const { data } = await List({
        warehouseId: val[0],
        status: 1
      })
      this.permList.forEach(item => {
        if (item.value === val[0]) {
          item.children = data.map(item => ({
            value: item.id,
            label: item.name
          }))
          console.log(this.permList)
        }
      })
    },
    async  submit () {
      if (this.$route.params.id === 'null') {
        this.from.areaId = this.from.location[1]
        this.from.warehouseId = this.from.location[0]
        await add(this.from)
        this.$router.push('/location')
        this.$message.success('添加成功')
      } else {
        await editSubmit(this.from)
        this.$router.push('/location')
        this.$message.success('编辑成功')
      }
    }
  }
}
</script>
<style  lang="less" scoped>
.button {
  text-align: center;
}
.button :hover{
  background-color: #ffb200;
}
.submit {
  background: #ffb200;
  color: #332929;
  height: 40px;
  border-radius: 20px;
  border: 0;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  padding-left: 26px;
  padding-right: 26px;
  cursor: pointer;
  outline: 0;
  width: 170px;
  margin: 0 15px;
}
.fanhui {
  background: #f8f5f5;
  color: #332929;
  height: 40px;
  border-radius: 20px;
  border: 0;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  padding-left: 26px;
  padding-right: 26px;
  cursor: pointer;
  outline: 0;
  width: 170px;
  margin: 0 15px;
}
.app-main {
  min-height: calc(100vh - 50px);
  background-color: #fdfafa;
  width: 100%;
  position: relative;
  overflow: hidden;
}
/deep/ .el-input__inner {
  height: 40px;
  line-height: 40px;
  border: 1px solid #f8f5f5;
  background: #f8f5f5;
  border-radius: 6px;
}
.contenBox {
  margin-top: 20px;
  margin-left: 29px;
  margin-right: 29px;
  padding: 30px;
}
.box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
}
.bgc {
  width: 30px;
  height: 40px;
  background: #e7dfdf;
  border-radius: 0 6px 6px 0;
  padding: 0 10px;
  border: 0;
  color: black;
}
</style>
